<template>
  <el-dialog
    v-model="dialogVisible"
    title="商品"
    width="50%"
    :before-close="handleClose"
  >
    <div
      class="seckill-manange-shop"
      v-loading="loading"
      element-loading-text="加载中..."
    >
      <div class="seckill-manange-shop-title">
        <div class="seckill-manange-shop-title-left">
          <el-form inline>
            <el-form-item>
              <el-input
                v-model="searchForm.name"
                placeholder="商品名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searchForm.code"
                placeholder="商品编码"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="searchFun">查询</el-button>
              <el-button @click="resetFun">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="seckill-manange-shop-title-right"></div>
      </div>
      <div class="seckill-manange-shop-table">
        <el-table border stripe :data="tableData" :height="400">
          <el-table-column prop="goods_name" label="商品名称">
            <template #default="{ row }">
              <div class="manage-info">
                <el-image
                  :preview-teleported="true"
                  style="width: 50px; min-width: 50px; height: 50px"
                  :src="imgSrc(row.cover)"
                  :zoom-rate="1.2"
                  :preview-src-list="[imgSrc(row.cover)]"
                  :initial-index="4"
                  fit="cover"
                  class="img-box"
                />
                <div class="right">
                  <div>
                    <label>商品名称：</label>
                    <span>{{ row.goods_name }} </span>
                  </div>
                  <div>
                    <label>商品编号：</label>
                    <span>{{ row.code }} </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="库存" show-overflow-tooltip>
            <template #default="{ row }">
              <div>累计库存： {{ row.stock_total }}</div>
              <div>剩余库存： {{ row.stock_total - row.stock_sales }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="商品分类">
            <template #default="{ row }">
              <div>
                {{ row.cate?.name }}
              </div>
              <div>
                <el-tag
                  style="margin-right: 5px"
                  v-for="item in row.marks"
                  effect="dark"
                  size="small"
                >
                  {{ item }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button type="primary" link @click="skuOpen(row)"
                >选择商品规格</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="seckill-manange-shop-table-foot" style="margin-top: 10px">
          <div></div>
          <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[20, 50, 100, 200]"
            layout="total, prev, pager, next, jumper"
            :total="total"
            :small="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div></div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <skuPage ref="skuPageRef" @refreshList="refreshList" />
</template>
<script setup>
import { listApi } from "@/plugins/api/shopping/manage";
import skuPage from "./DialogSeckill-shop-sku.vue";

let tableData = ref([]);

let loading = ref(false);
let searchForm = ref({});
function searchFun() {
  currentPage.value = 1;

  tableData.value = [];
  getData();
}
function resetFun() {
  currentPage.value = 1;
  searchForm.value = {};
  tableData.value = [];

  getData();
}
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;

  getData();
};
function getData() {
  loading.value = true;
  let obj = Object.assign(
    {
      page: currentPage.value,
      pageSize: pageSize.value,
    },
    searchForm.value
  );
  listApi(obj)
    .then((data) => {
      tableData.value = data.list;
      total.value = data.page.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

//
let dialogVisible = ref(false);
function handleClose(done) {
  // dialogVisible.value = false;
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}

function initFun() {
  currentPage.value = 1;
  searchForm.value = {};
  tableData.value = [];
  dialogVisible.value = true;
  getData();
}
function imgSrc(path) {
  return import.meta.env.VITE_APP_BASE_API + path;
}
const emit = defineEmits(["refreshList"]);
let skuPageRef = ref(null);
function skuOpen(row) {
  skuPageRef.value.initFun("add", row);
}
function refreshList() {
  emit("refreshList");
}

onMounted(() => {});
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.seckill-manange-shop {
  .manage-info {
    display: flex;

    .img-box {
      align-self: center;
    }

    .right {
      margin-left: 10px;
      align-self: center;

      span {
        color: #409eff;
      }
    }
  }

  .memo {
    font-size: 12px;
    color: #ff0000;
    margin-bottom: 5px;
  }

  .seckill-manange-shop-table-foot {
    display: flex;
    justify-content: center;
  }
}
</style>
